<template>
  <div class="video-list">
    <swiper ref="mySwiper" :options="swiperOptions">
    <swiper-slide :style="{height:Height+'px'}" v-for="(item,index) in dataList" :key="index">
      <div>
        <videos ref="videos" :videoList="item" :index="index"></videos>
      </div>
      <div class="infobar_warp">
        <info-bar></info-bar>
      </div>
      <div class="rightbar_warp">
        <right-bar></right-bar>
      </div>
    </swiper-slide>
  </swiper>
  </div>
</template>

<script>
import Videos from './Videos'
import InfoBar from './InfoBar' // 导入描述栏
import RightBar from './RightBar'// 导入右边栏
export default {
  name: "VideoList",
  data() {
    return {
      Height:window.innerHeight/4,
      page:1,
      isPlay:true,
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        direction: "vertical",
        grabCursor: true, //手掌型
        // // setWrapperSize: true,
        // autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
        slidesPerView: 1, // 展示数
        height: window.innerHeight, // 高度设置，占满设备高度
        // resistanceRatio: 0,//抵抗率
        // observeParents: true,
        hide: true,
        mousewheel:false,
        on:{
          tap:()=>{
            this.playAction(this.page - 1)
          },
          slideNextTransitionStart:()=>{
            this.page +=1;
            this.nextVideo(this.page - 1)
          },
          slidePrevTransitionEnd:()=>{
            this.page -= 1;
            this.preVideo(this.page - 1)
          }
        }
      },
      dataList:[
        {
          id:'1',
          url:'http://video.jishiyoo.com/161b9562c780479c95bbdec1a9fbebcc/8d63913b46634b069e13188b03073c09-d25c062412ee3c4a0758b1c48fc8c642-ld.mp4'
        },
        {
          id:'2',
          url:'http://video.jishiyoo.com/1eedc49bba7b4eaebe000e3721149807/d5ab221b92c74af8976bd3c1473bfbe2-4518fe288016ee98c8783733da0e2da4-ld.mp4'
        },
        {
          id:'3',
          url:'http://video.jishiyoo.com/549ed372c9d14b029bfb0512ba879055/8e2dc540573d496cb0942273c4a4c78c-15844fe70971f715c01d57c0c6595f45-ld.mp4'
        },
        {
          id:'4',
          url:'http://video.jishiyoo.com/3720932b9b474f51a4cf79f245325118/913d4790b8f046bfa1c9a966cd75099f-8ef4af9b34003bd0bc0261cda372521f-ld.mp4'
        },
      ]
    };
  },
  methods:{
    playAction(index){
      this.$refs.videos[index].playOrStop()
    },
    nextVideo(index){
      this.$refs.videos[index-1].stop()
      this.$refs.videos[index].play()
    },
    preVideo(index){
      this.$refs.videos[index+1].stop()
      this.$refs.videos[index].play()
    }
  },
  components:{
    Videos,
    InfoBar,
    RightBar
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  mounted() {
    // console.log("Current Swiper instance object", this.swiper);
    this.swiper.slideTo(0, 1000, false);
    
  }
};
</script>
<style scoped>
    .video-list{
      height: 100%;
    }
    .swiper-slide{
      
    }
    .infobar_warp{
       position: absolute;
       bottom: 55px;
       left: 0;
       color: #fff;
       line-height: 30px;
       margin-left: 5px;
    }
    .rightbar_warp{
      position: absolute;
      right: 5px;
      bottom: 60px;
      opacity: 0.8;
    }
</style>